<template>
	
	<view class="box" v-for="item in jobListData" :key="item.rid">
		<view @tap="gotoDetail(item.rid)">
			<image v-if="item.company_scale=='已上市'" class="rec" src="/static/img/jobs/rec.svg"></image>
			<view class="title font-weight">{{item.job_name}}</view>
			<view>
				<template v-for="(ele,index) in getLabels(item.job_label)" :key="index">
					<text class="tag">{{ele}}</text>
				</template>
			</view>
			<view class="company">
				<text class="company-name">{{item.company_name}}</text>
				<text class="company-status">{{item.company_scale}}</text>
			</view>
			<view class="hr">
				<image class="hr-avatar" mode="widthFix" src="/static/img/jobs/avatar.svg"></image>
				<text>{{item.company_hr}}</text>
			</view>
			<view class="salary">{{item.job_salary}}</view>
		</view>
	</view>
	
	<view>
	  <!-- 分页栏 -->
	      <view class="box">
	          <view class="page-list">
	              <!-- 上一页 -->
	              <view class="page-list-item" @tap="pre">
	                  <image mode="widthFix" class="pull-icon left" src="/static/img/common/more.svg">
	                  </image>
	              </view>
	              <view class="page-list-item" v-for="(p,index) in totalPage" :key="index">
	                  <view @tap="viewPage(index+1)" :class="currentPage==index+1?'on':''">
	                      {{index+1}}
	                  </view>
	              </view>
	              <!-- 下一页 -->
	              <view class="page-list-item" @tap="next">
	                  <image mode="widthFix" class="pull-icon right" src="/static/img/common/more.svg">
	                  </image>
	              </view>
	          </view>
	      </view>
	  </view>
</template>

<script setup>
	import {ref,inject} from 'vue'
	import {req} from '/hooks/req.js'
	const $root=inject('$root')
	const jobListData=ref([])
	let listCount = 3
	//页数
	let pageNo
	//总页数
	let totalPage=1
	//当前页数
	let currentPage=1
	
	//获取岗位列表数据
	const viewPage=(e)=>{
		//获取页数
		pageNo=e
		req($root+`/recruit/?page=${pageNo}&page_size=${listCount}`)
		.then(result=>{
			if(result.data.code==200){
				jobListData.value=result.data.data.data
				totalPage=result.data.data.total_page
				currentPage=result.data.data.page_no
			}
		})
	}
	viewPage(1)
	
	//上一页
	const pre=()=>{
		if(pageNo<=1) return
		viewPage(pageNo-1)
	}
	//下一页
	const next=()=>{
		if(pageNo>=totalPage) return
		viewPage(pageNo+1)
	}
	
	//获取标签
	const getLabels = function(str) {
		if(str){
			return str.split(";")
		}
	}
	
	//跳转详情页
	const gotoDetail = (id)=>{
		//id表示岗位的唯一id值
		uni.navigateTo({
			url:`/pages/jobDetail/jobDetail?id=${id}`
		})
	}
</script>

<style scoped>
/* 招聘页面样式 */
/* --------------------------------------------------------- */
.page-list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  position: relative;
}

.page-list-item {
  font-size: 14px;
  width: 30px;
  height: 20px;
  text-align: center;
  padding: 4px;
  color: grey;
}

.on {
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border-radius: 50%;
  color: white;
  background: #1296db;
}

.pull-icon {
  width: 15px;
  position: relative;
  top: 2px;
}

.left {
  transform: scaleX(-1);
}

.rec {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
